<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城</title>
</head>
<body>
    <div id="content">
        <!--deal box-->
        <div class="modal fade" id="commodity-order">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">订单确认<b class="text-primary">{{ commodity.name }}</b></h3>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <img class="card-image-top" style="width: 100%;" v-show="is_logged_in" :src="imageUrl(image)">
                        <h3 class="text-danger" v-show="!is_logged_in">请先在个人中心登录</h3>
                        <a href="#" class="btn btn-primary" @Click="create_order">&ensp;确认已支付，点击购买&ensp;</a>
                        <h6 class="text-info" v-show="is_logged_in"><i>"支付后工作人员将同您取得联系，订单在个人中心查看"</i></h6>
                        <h6 class="text-warning"><b>{{ message }}</b></h6>
                    </div>
                    <div class="modal-footer">
                        @宠物之家
                    </div>
                </div>
            </div>
        </div>
        <!--modal box-->
        <div class="modal fade" id="commodity-info">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title text-primary">{{ commodity.name }}</h3>
                        <button type="button" class="close" data-dismiss="modal" @click="reset_info">&times;</button>
                    </div>
                    <div class="modal-body card">
                        <img class="card-image-top" style="width: 100%;" :src="imageUrl(commodity.image)">
                        <div class="card-body">
                            <h5>{{ commodity.description }}</h5>
                            <kbd class="bg-warning">{{ commodity.type }}</kbd>
                        </div>
                        <h6 class="text-secondary">
                            生产商：{{ commodity.producer.name }}&ensp;地址：{{ commodity.producer.location }}&ensp;
                            联系电话：{{ commodity.producer.contactNumber }}&ensp;
                        </h6>
                    </div>
                    <div class="modal-footer">
                        @宠物之家
                    </div>
                </div>
            </div>
        </div>
        <!--page-->
        <h3 class="text-secondary">宠物商城</h3>
        <div id="commodity-data-box">
            <div v-for="commodity in commodities" :key="commodity.id" style="display: inline-block; margin: 3px;">
                <div class="card" style="width: 16rem; ">
                    <img class="card-img-top" :src="imageUrl(commodity.image)" alt="Card image cap">
                    <div class="card-body">
                        <h4> {{ commodity.name }}</h4>
                        <h6 class="text-info">{{ commodity.type }}</h6>
                        <p class="text-primary">￥{{ commodity.price }}</p>
                        <a href="#" class="btn btn-success" data-toggle="modal" data-target="#commodity-info" @click="render_modal_box(commodity.id)">&ensp;信息&ensp;</a>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#commodity-order" @click="render_order_modal_box(commodity.id)">&ensp;购买&ensp;</a>
                    </div>
                </div>
            </div>
            <!--search box-->
            <div class="form-inline">
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index-1)">上一页</button>
                第{{ page_index }}页，共{{ page_num }}页
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index+1)">下一页</button>
                <div class="input-group-sm">
                    <kbd>To</kbd>：
                    <input type="text" class="form-control" style="width: 3rem;" v-model="go">
                    <button class="btn btn-link border-0 btn-info" @Click="get_paging_data(go)">Go</button>
                    <kbd>检索</kbd>
                    &ensp;类型&ensp;
                    <input type="text" class="form-control" style="width: 6rem" v-model="pointed_type" placeholder="全部类型">
                    &ensp;生产商&ensp;
                    <select class="form-control option" v-model="pointed_producer_id">
                        <option v-for="producer in producers" :value="producer.id">
                            {{ producer.name }}
                        </option>
                    </select>
                </div>
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(0)">搜索</button>
                <button class="btn btn-link border-0 btn-secondary" @Click="reset_search">重置</button>
            </div>
        </div>
    </div>
</body>
</html>